<template>
  <div class="body">
    <div class="search">
      <el-select v-model="select" style="width: 170px">
        <el-option
          v-for="item in options"
          :key="item.label"
          :value="item.label"
          :label="item.label"
        >
        </el-option>
      </el-select>
      <el-select v-model="subselect" style="width: 160px">
        <el-option
          v-for="item in catalog"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        >
        </el-option>
      </el-select>
      <el-input
        class="s2"
        v-model="keyword"
        placeholder="搜索商品"
        prefix-icon="el-icon-search"
        style="width: 350px; margin-right: 10px"
        clearable
        @keydown.enter.native="search"
      ></el-input>
      <el-button icon="el-icon-search" type="primary" @click="search">
        搜索
      </el-button>
    </div>
    <div v-if="isSearchGood">
      <div class="first" v-for="(item, index) in publishList" :key="index">
        <div class="box">
          <img :src="item.img" @click="goodinfo(item)" />
          <p class="review">{{ item.introduction }}</p>
          <div class="appraise">来自于 {{ item.username }} 的商品</div>
          <div class="info">
            <h4 class="good">商品:{{ item.name }}</h4>
            <em style="float: left">|</em>
            <span style="float: left">价格:{{ item.price }}元</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="isSearchRequest">
      <div class="first" v-for="(item, index) in requestList" :key="index">
        <div class="box">
          <img
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            @click="requestinfo(item)"
          />
          <p class="review">{{ item.introduction }}</p>
          <div class="appraise">
            来自于 {{ getusername(item.userid) }} 的需求
          </div>
          <div class="info">
            <h4 class="good">商品:{{ item.name }}</h4>
            <em style="float: left">|</em>
            <span style="float: left">期望价格:{{ item.price }}元</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="isSearchPerson">
      <el-table width="100%" :data="user" height="100%">
        <el-table-column label="用户列表" width="100px">
          <template>
            <el-avatar :size="60" fit="fill" :src="user.userimg"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="用户名" prop="username" fit></el-table-column>
        <el-table-column label="ID" prop="userid" fit></el-table-column>
        <el-table-column fit
          ><template slot-scope="scope">
            <el-button @click="watchUser(scope.row)" type="text" size="medium"
              >查看信息</el-button
            >
            <el-button @click="talk(scope.row)" type="text" size="medium"
              >私聊</el-button
            >
            <el-button @click="addFriend(scope.row)" type="text" size="medium"
              >添加好友</el-button
            >
          </template></el-table-column
        >
      </el-table>
      <el-dialog title="用户信息" :visible.sync="watch">
        <div class="item">用户名字:{{ this.friendinfo.username }}</div>
        <div class="item">用户名字:{{ this.friendinfo.userid }}</div>
        <div class="item">用户邮箱:{{ this.friendinfo.email }}</div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="watch = false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.keyword = this.$store.state.search;
    this.search();
  },
  data() {
    return {
      keyword: "",
      select: "商品",
      subselect: "1",
      isSearchGood: false,
      isSearchRequest: false,
      isSearchPerson: false,
      watch: false,
      options: [{ label: "商品" }, { label: "需求" }, { label: "用户" }],
      catalog: [
        { label: "全部", value: "1" },
        { label: "教辅资料", value: "2" },
        { label: "生活用品", value: "3" },
        { label: "电子产品", value: "4" },
        { label: "网络资源", value: "5" },
        { label: "其他", value: "6" },
      ],
      friendinfo: {
        username: "",
        userid: "",
        email: "",
      },
      publishList: [],
      requestList: [],
      user: [
        {
          username: "123",
          userid: "123",
          userimg:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          email: "",
        },
      ],
    };
  },
  methods: {
    getusername(id) {
      this.$http.get("usr/info?uid=" + id).then((res) => {
        if (res.data.success == true) {
          console.log(res.data);
          return res.data.username;
        }
      });
      return null;
    },
    addFriend(row) {
      //添加好友
      this.$http.post("addFriend", { uid: row.userid }).then((res) => {
        if (res.data.success === true) {
          this.$message.success("添加好友成功!");
        } else {
          this.$message.error("添加好友失败,请稍后再试!");
        }
      });
    },
    goodinfo(good) {
      this.$store.commit("setGood", good);
      this.$router.push("goodinfo");
    },
    requestinfo(request) {
      this.$store.commit("setRequest", request);
      this.$router.push("requestinfo");
    },
    search() {
      if (this.keyword === "") {
        this.$message({ duration: 1000, message: "请输入搜索内容..." });
        return;
      }
      if (this.select === "") {
        this.$message({ duration: 1000, message: "请选择您要搜索的分类..." });
        return;
      }
      if (this.select === "商品") {
        this.isSearchPerson = false;
        this.isSearchRequest = false;
        //请求内容
        this.isSearchGood = true;
        this.$http
          .get(
            "searchGoodsByKeywords?keywords=" +
              this.keyword +
              "&" +
              "cat_id=" +
              this.subselect
          )
          .then((res) => {
            if (res.data.success === true) {
              ///>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
              var keymap = {
                gid: "goodid",
                uid: "userid",
                imgDir: "img",
                inventory: "num",
                goodsDesc: "introduction",
              };
              for (var i = 0; i < res.data.goods.length; i++) {
                var obj = res.data.goods[i];
                for (var key in obj) {
                  var newkey = keymap[key];
                  if (newkey) {
                    obj[newkey] = obj[key];
                    delete obj[key];
                  }
                }
              }
              this.publishList = res.data.goods;
            } else {
              this.$message.error("加载失败,请重新加载!");
            }
          });
      } else if (this.select === "需求") {
        this.isSearchGood = false;
        this.isSearchPerson = false;
        this.isSearchRequest = true;
        this.$http
          .get(
            "getRequestByKeyWord?keyword=" +
              this.keyword +
              "&cat_id=" +
              this.subselect
          )
          .then((res) => {
            if (res.data.success === true) {
              ///>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
              var keymap = {
                prefPrice: "price",
                uid: "userid",
                reqDesc: "introduction",
                rid: "requestid",
                title: "name",
                offerTime: "date",
              };
              for (var i = 0; i < res.data.request.length; i++) {
                var obj = res.data.request[i];
                for (var key in obj) {
                  var newkey = keymap[key];
                  if (newkey) {
                    obj[newkey] = obj[key];
                    delete obj[key];
                  }
                }
              }
              this.requestList = res.data.request;
            } else {
              this.$message.error("加载失败,请重新加载!");
            }
          });
      } else if (this.select === "用户") {
        this.isSearchGood = false;
        this.isSearchRequest = false;
        this.isSearchPerson = true;
        this.$http
          .get("searchperson", { keywords: this.keyword })
          .then((res) => {
            if (res.data.success === true) {
              //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
            } else {
              this.$message.error("加载失败,请重新加载!");
            }
          });
      }
    },
    watchUser(row) {
      //查看好友信息
      this.friendinfo.username = row.username;
      this.friendinfo.userid = row.userid;
      this.friendinfo.email = row.email;
      this.watch = true;
    },
    talk(row) {
      if (this.$store.state.isLogin === false) {
        alert("请先登录!");
        return;
      }
      this.$store.commit("talkto", row);
      this.$router.push("mymessage");
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  min-height: 960px;
  margin: 0 auto;
  width: 60%;
  overflow: hidden;
}
.search {
  height: 80px;
  text-align: center;
  line-height: 80px;
}
/deep/.el-input__inner {
  font-size: 27px;
}
/deep/.el-button {
  font-size: 27px;
}
.s2 {
  /*s2是我的输入框class*/
  width: 400px; /*调整整个组件的宽度*/
}
/deep/.el-input {
  font-size: 20px;
}
/deep/ .el-input__inner {
  /*或者 .s2>>>.el-input__inner  */
  height: 60px; /*调整inner的高度*/
  border-radius: 10px; /*输入框圆角值*/
}
li {
  font-size: 20px;
  margin: 5px 0;
}
.box {
  border-radius: 20px;
  float: left;
  width: 298px;
  height: 415px;
  background-color: #fff;
  /* 让块级的盒子水平居中对齐 */
  margin: 30px 10px;
}
.box img {
  /* 图片的宽度和父亲一样宽 */
  border-radius: 20px 20px 0 0;
  width: 100%;
}
.review {
  height: 70px;
  font-size: 14px;
  /* 因为这个段落没有 width属性 所有 padding不会撑开盒子的宽度 */
  padding: 0 28px;
  margin-top: 30px;
}
.appraise {
  font-size: 12px;
  color: #b0b0b0;
  margin-top: 20px;
  padding: 0 28px;
}
.info {
  font-size: 14px;
  margin-top: 15px;
  padding: 0 28px;
}
.info h4 {
  display: inline-block;
  font-weight: 400;
}
.info span {
  color: #ff6700;
}
.info em {
  font-style: normal;
  color: #ebe4e0;
  margin: 0 6px 0 15px;
}
.good {
  margin: 0;
  float: left;
  width: 1250px;
  max-width: 125px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/deep/.el-table {
  font-size: 19px;
}
/deep/.el-table .el-button {
  font-size: 19px;
  padding-left: 30px;
}
/deep/ .el-table .el-avatar {
  margin: 0;
}
.item {
  padding: 20px 40px;
  font-size: 25px;
}
</style>